<template>
	<view class="transfer-history-wrapper" @click="selectListHide=true">
		<u-navbar :custom-back="back" :title="title"></u-navbar>
		<div class="list-all">
			<div class="select-type-wrapper">
				<div class="selected-option" @click.stop="selectListHide=!selectListHide">
					{{selectList[selectCurrent].name}}
					<u-icon name="arrow-right"></u-icon>
				</div>
				<div class="select-list" :class="{'hide':selectListHide}">
					<div class="select-item" @click.stop="selectType(index)" :key="item.name"
						:class="{'selected':selectCurrent===index}" v-for="(item,index) in selectList">
						{{item.name}}
					</div>
				</div>
			</div>
			<div style="display: flex;">
				<div class="money">支出：{{zhichu|formatWalletTwo}}</div>
				<div class="money" style="margin-left: 40upx;">收入：{{shouru|formatWalletTwo}}</div>
			</div>
		</div>
		<view v-if="transferList===[]">
			<u-loadmore bg-color="transparent" status="loading" />
		</view>
		<view v-else-if="transferList.length == 0">
			<u-loadmore bg-color="transparent" status="nomore" />
		</view>
		<div v-else>
			<div class="list-wrapper">
				<!-- v-if="item.sumMoney!=0 && item.show===false"     type!=='SALE'&&type!=='PROMOTE'&&type!=='RECHARGE'-->
				<div class="list-item" v-for="(item,index) in transferList" :key="index"
					v-if="(item.sumMoney!=0&&type==='PROMOTE') || type==='SALE'||type==='PROMOTE_FW'||type==='PROMOTE_HY'||type==='RECHARGE'">
					<div v-if="item.face || item.nickName || item.cardName || item.mobile">
						<div class="nickname" v-if="item.status == 'shou'">
							<image v-if="item.face" class="avatar" :src="item.face" mode="aspectFill"></image>
							<span v-if="item.nickName">{{item.nickName}}</span>
							<span v-if="item.cardName">{{item.cardName}}</span>
							<span
								v-if="item.mobile">{{ item.mobile ? item.mobile.substr(0, 3) + "****"+ item.mobile.substr(7, 12):"" }}</span>
						</div>
					</div>
					<div class="parent-item">
						<div class="left">
							<div class="sn" v-if="item.sn">订单号：{{item.sn}}</div>
							<div class="time" v-if="item.createTime">交易时间：{{item.createTime}}</div>
							<div class="time"
								v-if="item.applyMoney && item.type == 'Y' || item.applyMoney && item.type == 'W'">
								对应现金额：{{ item.applyMoney|formatWalletTwo }}</div>
						</div>
						<div class="right" style="width: 30%;">
							<div class="type" style="font-size: 36rpx;color: rgba(255, 152, 56, 1);"
								v-if="item.sumMoney && item.status == 'fu'">
								<span>{{ item.sumMoney|formatWalletTwo }}</span>
							</div>
							<div class="type" style="font-size: 36rpx;color: rgba(29, 191, 45, 1);"
								v-if="item.sumMoney && item.status == 'shou'">
								<span>+</span>
								<span>{{ item.sumMoney|formatWalletTwo }}</span>
							</div>
							<div class="type" style="font-size: 36rpx;color: rgba(29, 191, 45, 1);"
								v-if="item.sumMoney == 0">
								<span>+</span>
								<span>0.00</span>
							</div>
							<div class="type" style="color: red;"
								v-if="type == 'SALE' && item.orderType == 'OFFLINE' && item.type == 'O'">
								线下</div>
							<div class="type" style="color: green;"
								v-if="type == 'SALE' && item.orderType != 'OFFLINE' && item.type == 'O'">线上</div>
							<div v-if="item.transferType && item.transferType == 'PORT_FEE'">
								<div class="orders">端口费</div>
							</div>
							<div v-else>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_WITHDRAWAL'">余额提现
								</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_WITHDRAWALREFUND'">
									余额提现退回</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_PAY' && item.status == 'fu' && item.type == 'Z'">
									转赠</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_PAY' && item.status == 'shou' && item.type == 'Z'">
									转入</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_PAY'  && item.type == 'O'">
									消费</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_REFUND'">余额退款</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_RECHARGE'">余额充值</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION'">佣金提成
								</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSIONREFUND'">
									佣金提成退款</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_HY' && item.status == 'fu'">
									购买会员</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_HY' && item.status == 'shou'">
									佣金提成-会员费</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_FW'">
									佣金提成-服务费</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_TS'">
									佣金提成-天使</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_SY'">
									佣金提成-事业</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_HY_REFUND'">
									佣金提成退款-会员费</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_FW_REFUND'">
									佣金提成退款-服务费</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_TS_REFUND'">
									佣金提成退款-天使</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COMMISSION_SY_REFUND'">
									佣金提成退款-事业</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_DEPARTMENT'">授信拨款
								</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_REPAY'">授信还款</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COLLECT'">运费</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'WALLET_COLLECT_REFUND'">运费退款
								</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'transfer' && item.status == 'fu'">
									转出</div>
								<div class="orders"
									v-if="item.transactionType && item.transactionType == 'transfer' && item.status == 'shou'">
									转入</div>
								<div class="orders" v-if="item.transactionType && item.transactionType == 'recharge'">充值
								</div>
							</div>
							<!-- 控制三个点 -->
							<div v-if="type!=='PROMOTE'">
								<div class="type"
									v-if="item.walletDetailList&&item.walletDetailList.length > 0 && item.show==false"
									@click="zhankai(index)">
									<u-icon name="more-dot-fill" size="32" color="#666666"></u-icon>
								</div>
								<div class="type"
									v-if="item.walletDetailList&&item.walletDetailList.length > 0 &&item.show==true"
									@click="guanbi(index)">
									<u-icon name="more-dot-fill" size="32" color="#666666"></u-icon>
								</div>
							</div>
						</div>
					</div>
					<div v-if="item.walletDetailList&&item.walletDetailList.length > 0 && item.show===true">
						<div class="children-item" v-for="(wlist,cindex) in item.walletDetailList"
							:key="wlist.createTime">
							<div class="left">
								<div class="time" v-if="wlist.createTime">
									<div v-if="wlist.transferType && wlist.transferType == 'PORT_FEE'">
										<div class="orders">端口费</div>
									</div>
									<div v-else>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_WITHDRAWAL'">
											余额提现</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_WITHDRAWALREFUND'">
											余额提现退回</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_PAY' && wlist.status == 'fu' && wlist.type == 'Z'">
											转赠</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_PAY' && wlist.status == 'shou' && wlist.type == 'Z'">
											转入</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_PAY' && wlist.type == 'O'">
											消费</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_REFUND'">
											余额退款
										</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_RECHARGE'">
											余额充值
										</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION'">
											佣金提成</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSIONREFUND'">
											佣金提成退款</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_HY' && wlist.status == 'fu'">
											购买会员</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_HY' && wlist.status == 'shou'">
											佣金提成-会员费</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_FW'">
											佣金提成-服务费</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_TS'">
											佣金提成-天使</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_SY'">
											佣金提成-事业</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_HY_REFUND'">
											佣金提成退款-会员费</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_FW_REFUND'">
											佣金提成退款-服务费</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_TS_REFUND'">
											佣金提成退款-天使</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COMMISSION_SY_REFUND'">
											佣金提成退款-事业</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_DEPARTMENT'">
											授信拨款</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_REPAY'">授信还款
										</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COLLECT'">运费
										</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'WALLET_COLLECT_REFUND'">
											运费退款
										</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'transfer' && wlist.status == 'fu'">
											转出</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'transfer' && wlist.status == 'shou'">
											转入</div>
										<div class="orders"
											v-if="wlist.transactionType && wlist.transactionType == 'recharge'">充值</div>
									</div>
								</div>
							</div>
							<div class="right">
								<div class="type" style="font-size: 36rpx;color: rgba(255, 152, 56, 1);"
									v-if="wlist.sumMoney && wlist.status == 'fu'">
									<span>{{ wlist.sumMoney|formatWalletTwo }}</span>
								</div>
								<div class="type" style="font-size: 36rpx;color: rgba(29, 191, 45, 1);"
									v-if="wlist.sumMoney && wlist.status == 'shou'">
									<span>+</span>
									<span>{{ wlist.sumMoney|formatWalletTwo }}</span>
								</div>
								<div class="type" style="font-size: 36rpx;color: rgba(29, 191, 45, 1);"
									v-if="wlist.sumMoney == 0">
									<span>+</span>
									<span>0.00</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<u-loadmore bg-color="transparent" :status="loadingState" />
		</div>
	</view>
</template>

<script>
	import {
		TransferMoneyAll,
		TransferList,
		getWalletLog,
		logsum
	} from "@/api/members.js"
	import storage from "@/utils/storage.js";
	import BigNumber from 'bignumber.js'
	const WalletType = {
		'销售钱包': 'SALE',
		'推广钱包-服务费': 'PROMOTE_FW',
		'推广钱包-会员费': 'PROMOTE_HY',
		'推广钱包': 'PROMOTE',
	}
	export default {
		name: "transfer-history",
		data() {
			return {
				title: '钱包明细',
				outMoney: 0, // 转出总金额
				tabsList: [{
					name: '销售钱包'
				}],
				tabsCurrent: 0,
				selectList: [{
						name: '全部',
						type: 'all'
					}, {
						name: '收入',
						type: 'in'
					},
					{
						name: '支出',
						type: 'out'
					}
				],
				selectCurrent: 0,
				selectListHide: true,
				transferList: [],
				loadingState: 'loading',
				type: '',
				userinfo: {},
				zhichu: '',
				shouru: '',
				sumMoney: '',
				indexsss: ''
			}
		},
		onShow() {
			this.userinfo = storage.getUserInfo()
			// console.log(this.userinfo)
		},
		onLoad(options) {
			console.log('@@@@', options)
			this.type = options.type
			this.initWallet()
			this.pageNumber = 1
			this.pageSize = 10
			this.initList()
			this.logsum()
			// this.initMoney()

		},
		// 滚动加载监听事件
		onReachBottom() {
			this.initList()
		},
		methods: {
			// 展开/关闭
			zhankai(index) {
				this.transferList[index].show = true
			},
			guanbi(index) {
				this.transferList[index].show = false
			},
			// 总支出、收入
			logsum() {
				logsum({
					walletFlag: this.type
				}).then((res) => {
					if (res.data.code == 200) {
						this.zhichu = res.data.result.zhichu
						this.shouru = res.data.result.shouru
					}
				})
			},
			// 返回
			back() {
				uni.switchTab({
					url: "/pages/tabbar/user/my",
				});
			},
			initParams() {
				this.pageNumber = 1
				this.pageSize = 10
				this.transferList = []
				this.loadingState = 'loading'
				this.initList()
			},
			initWallet() {
				this.userInfo = this.$options.filters.isLogin();
				let userinfo = storage.getUserInfo()
				this.partnerType = userinfo.partnerType
				let walletList = []
				if (this.partnerType === 4 || this.partnerType === 4) {
					walletList.push({
						name: '推广钱包-服务费',
					})
					walletList.push({
						name: '推广钱包-会员费',
					})
				} else if (this.partnerType === 1 || this.partnerType === 2) {
					walletList.push({
						name: '推广钱包',
					})
				}
				this.tabsList = this.tabsList.concat(walletList)
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				this.initParams()
				this.initMoney()
			},
			selectType(index) {
				this.selectCurrent = index
				this.selectListHide = true
				this.initParams()
			},
			initMoney() {
				TransferMoneyAll({
					owner: WalletType[this.tabsList[this.tabsCurrent].name],
				}).then((res) => {
					this.outMoney = res.data.result.outMoney || 0
				})
			},
			initList() {
				if (this.loadingState === "noMore") return
				getWalletLog({
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					type: this.selectList[this.selectCurrent].type,
					walletFlag: this.type
				}).then((res) => {
					if (res.data.code == 200) {
						let list = res.data.result.records;
						console.log(list.length, '*/*/*/*/*')
						if (list.length < 10) {
							this.loadingState = "noMore";
						}
						list = list.map((item) => {
							return {
								...item,
								show: false,
							}
						})
						if (this.transferList === []) {
							this.transferList = list
						} else {
							this.transferList = this.transferList.concat(list);
						}
						this.pageNumber += 1;
					} else {
						this.transferList = []
						this.loadingState = "noMore";
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.transfer-history-wrapper {
		min-height: 100vh;
		padding-bottom: 60upx;

		.list-all {
			padding: 0 32upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;

			.select-type-wrapper {
				position: relative;

				.selected-option {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 200upx;
					height: 64upx;
					border: 2upx solid #dddddd;
					border-radius: 8upx;
					background-color: #ffffff;
				}

				.select-list {
					position: absolute;
					top: 62upx;
					right: 0;
					width: 200upx;
					height: 200upx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text-align: center;
					background-color: #ffffff;
					border: 2upx solid #dddddd;
					overflow: hidden;
					box-sizing: border-box;
					opacity: 1;
					transition: height 0.3s;
					z-index: 2;

					&.hide {
						height: 0;
						opacity: 0;
					}

					.select-item {
						height: 60upx;
						line-height: 60upx;
						width: 200upx;

						&.selected {
							color: rgb(0, 162, 255);
						}
					}
				}
			}
		}

		.list-wrapper {
			.list-item {
				margin-bottom: 24upx;
				padding: 24upx 32upx;
				background-color: #ffffff;
			}

			.parent-item {
				margin-bottom: 24upx;
			}

			.children-item {
				padding: 16upx 0;
				border-top: 2upx solid #f3f3f3;
			}

			.parent-item,
			.children-item {
				display: flex;
				align-items: center;
				justify-content: space-between;


				.left {
					.time {
						margin-top: 10upx;
						color: rgba(156, 156, 156, 1);
					}
				}

				.right {
					text-align: right;

					.money {
						font-size: 32upx;
						font-weight: bold;

						&.in {
							color: #FF6200;
						}

						&.out {
							color: #00a2ff;
						}
					}

					.type {
						font-size: 28upx;
						color: #999999;
					}
				}
			}

			.nickname {
				background-color: #ffffff;
				padding: 24upx;
				margin-bottom: 24upx;
				border-bottom: 1px solid rgba(232, 232, 232, 1);
				display: flex;
				align-items: center;
				color: rgba(158, 123, 40, 1);

				image {
					width: 68rpx;
					height: 68rpx;
				}

				span {
					margin-left: 10upx;
				}
			}
		}
	}

	.orders {
		color: rgba(156, 156, 156, 1);
		font-size: 24rpx;
	}
</style>
